import React, { useRef, ReactElement } from 'react'
import { observer } from '@formily/reactive-react'

import { toggleCheckAll, deleteDone, allCount, doneCount } from '@/store'
import less from './style.module.less'


export default observer((): ReactElement => {

  const checkboxRef = useRef<HTMLInputElement>(null)

  const isAllChecked = (): boolean => doneCount.value === allCount.value && allCount.value !== 0 ? true : false

  return (
    <div className={less.footer}>
      <label>
        <input
          type="checkbox"
          ref={checkboxRef}
          onChange={() => toggleCheckAll(checkboxRef.current!.checked)}
          checked={isAllChecked()} />
        <span>已完成 {doneCount.value} / 全部 {allCount.value}</span>
      </label>
      <button onClick={() => deleteDone()} className={less.btn}>删除已完成</button>
    </div>
  )
})

